import React from 'react';
import Card from '../widget/card/card.jsx';
import Cardlist from '../widget/card/cardlist.jsx';
import LazyLoad from 'react-lazyload';
import './classifyProductbig.scss';
import {
  Link
} from 'react-router-dom';
import { getGoodsList } from 'api/good.js';
class ClassifyProductbig extends React.Component{
	constructor(props) {
    super(props)
    this.state = {
    	info:[],
    	sort:1,
    	type:'glyphicon-classify',
    	color3:'',
      navList:['综合', '上架时间', '销量', '价格'],
      navNum: 0,
      last:'',
      currentPage: 0,
      lastPage: 0
    }
  }
  show (index) { //navList点击切换
    this.setState({
      navNum: index
    }, () => {
      if (this.state.navNum === 0) {
        this.setState({
          sort: 1,
          color3: '',
          info:[]
        }, () => {
          this._getGoodsList(this.state.sort,1)
        })
      } else if (this.state.navNum === 1) {
        this.setState({
          sort: 2,
          color3: '',
          info:[]
        }, () => {
          this._getGoodsList(this.state.sort,1)
        })
      } else if (this.state.navNum === 2) {
        this.setState({
          sort: 3,
          color3: '',
          info:[]
        }, () => {
          this._getGoodsList(this.state.sort,1)
        })
      } else {
        this.setState({
          color3:this.state.color3==='glyphicon glyphicon-down active' ? 'glyphicon glyphicon-up active' : 'glyphicon glyphicon-down active',
          sort:this.state.sort === 4 ? 5 : 4,
          info:[]
        }, () => {
          this._getGoodsList(this.state.sort,1)
        })
      }
    })
  }
	_getGoodsList (sum, num) { //商品列表接口
  	getGoodsList({
  		cat_id: this.props.location.state.id,
      sort:sum,
      pageSize: 10,
      page: num
  	}).then(res => {
  		if (res.code===1){
        this.setState({
          info:this.state.info.concat(res.data.data),
          currentPage: num,
          lastPage: res.data.last_page
        })
  		}
  	})
  }
  type () { //列表和大图模式切换
  	this.setState({
  		type:this.state.type==='glyphicon-classify' ? 'glyphicon-classify1' :'glyphicon-classify'
  	})
  }
  goBack () {
    this.props.history.goBack()
  }
  componentDidMount(){
  	this._getGoodsList(this.state.sort,1)
    let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._getGoodsList(that.state.sort, i++)
      }
    }
  }
	render(){
		return(
			<div>
				<div className="big_title">
					<div className="glyphicon glyphicon-back" style={{lineHeight: '2rem'}} onClick={this.goBack.bind(this)}></div>
          <Link to='/search'><p className="search">{this.props.location.state.cat_name}</p></Link>
          <div className={`glyphicon ${this.state.type}`} onClick={this.type.bind(this)}></div>
				</div>
				<div className="big_nav guding">
        {
          this.state.navList.map((item,index) => {
            return(
              <div onClick={this.show.bind(this,index)} className={this.state.navNum === index ? 'active' : undefined} key={index}>{item}
              {index === 3 ? <span className={this.state.color3}></span> : ''}
              </div>
            )
          })
        }
				</div>
				<div className="search_content">
					{this.state.info.map((item, index) => {
						if( this.state.type==='glyphicon-classify'){
							return(
								<LazyLoad offsetTop={200} key={index} height={0}>
	                <Card shopDetail={{...item, hide: true}}/>
	              </LazyLoad>
							)
						}else{
							return(
								<LazyLoad offsetTop={200} key={index} height={0}>
	                <Cardlist shopDetail={{...item}}/>
	              </LazyLoad>
							)
						}
          })}
          <div>{this.state.last}</div>
				</div>
				<div className="kong bigshow">
					<div>
						<span className="glyphicon glyphicon-shop big"></span>
						<p>暂无相关产品</p>
					</div>
				</div>
        <div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板！没有更多了！ ————</div>
			</div>
		)
	}
}
export default ClassifyProductbig